<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 移动端界面设置-->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>详情页</title>


  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <link rel="stylesheet" type="text/css" href="../static/css/custom.css" th:href="@{/css/custom.css}">
  <link rel="stylesheet" type="text/css" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
  <link rel="stylesheet" type="text/css" href="../static/css/typo.css" th:href="@{/css/typo.css}">
</head>
<body>
<!--导航-->
<nav class="ui inverted attached segment c-padded-tb-mini c-nav-shadow">

  <div class="ui inverted secondary stackable menu">

    <h2 class="ui red  header item">Blog</h2>
    <a href="#" class="j-item item c-mobile-hide"><i class="home icon"></i>首页</a>
    <a href="#" class="j-item item c-mobile-hide"><i class="server icon"></i>分类</a>
    <a href="#" class="j-item item c-mobile-hide"><i class="tags icon"></i>标签</a>
    <a href="#" class="j-item item c-mobile-hide"><i class="clone icon"></i>归档</a>
    <a href="#" class="j-item item c-mobile-hide"><i class="clipboard outline icon"></i>更多</a>
    <div class="right j-item item c-mobile-hide">
      <div class="ui icon input">
        <input class="prompt" type="text" placeholder="搜索...">
        <i class="search link icon" ></i>
      </div>
    </div>
    <a href="#" class="ui menu toggle black button c-top-right c-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </div>

</nav>

<!-- body -->
<div class="c-padded-tb-massive">
  <div class="ui container">

   <!--头部信息-->
    <div class="ui top attached segment">
      <div class="ui horizontal link list">
        <div class="item">
          <img src="https://cdn.pixabay.com/photo/2021/06/29/23/05/poppy-6375453_960_720.jpg" alt="" class="ui avatar image" width="100" height="100">
          <div class="content custom-block"><a href="#" class="header">Blog</a></div>
        </div>
        <div class="item">
          更新于:2021-7-15
        </div>
        <div class="item">
          浏览次数:1234
        </div>
      </div>
    </div>

    <!--photo-->
    <div class="ui attached segment">
      <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.tqOJQgthRUNn_4PldLKiYwHaE8?w=273&h=182&c=7&o=5&dpr=1.25&pid=1.7" width="800" height="450" alt="" class="ui fluid rounded image">
    </div>

    <!--content-->
    <div class="ui attached padded segment">
    <!--创作标签-->
      <div class="ui right aligned basic segment">
        <div class="ui orange label">原创</div>
      </div>
      <!--markdown-->
      <h2 class="ui center aligned header">一款让你一见钟情的浏览器插件来了</h2>
      <br>
      <div class="typo typo-selection js-toc-content c-padded-lr-responsive">
        <article class="post-content" id="article-container"><h2 id="设计原则"><a class="markdownIt-Anchor" href="#设计原则" data-pjax-state=""></a> 设计原则</h2><ul><li><p>单一职权原则（SRP）</p><blockquote><p>一个对象或方法只做一件事情。如果一个方法承担了过多的职责，那么在需求的变迁过程中，需要改写这个方法的可能性就越大。</p></blockquote><p><strong>应该把对象或方法划分成较小的粒度</strong></p></li><li><p>最小知识原则（LKP）</p><blockquote><p>一个软件实体应当 尽可能少地与其他实体发生相互作用</p></blockquote><p><strong>应当尽量减少对象之间的交互。如果两个对象之间不必彼此直接通信，那么这两个对象就不要发生直接的 相互联系，可以转交给第三方进行处理</strong></p></li><li><p>开放 - 封闭原则（OCP）</p><blockquote><p>软件实体（类、模块、函数）等应该是可以扩展的，但是<strong>不可修改</strong>。</p></blockquote><p><strong>当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，尽量避免改动程序的源代码，防止影响原系统的稳定</strong></p></li></ul><h2 id="什么是设计模式"><a class="markdownIt-Anchor" href="#什么是设计模式" data-pjax-state=""></a> 什么是设计模式</h2><blockquote><p>假设有一个空房间，我们要日复一日地往里面放一些东西。最简单的办法当然是把这些东西直接扔进去，但是时间久了，就会发现很难从这个房子里找到自己想要的东西，要调整某几样东 西的位置也不容易。所以在房间里做一些柜子也许是个更好的选择，虽然柜子会增加我们的成本，但它可以在维护阶段为我们带来好处。使用 这些柜子存放东西的规则，或许就是一种模式</p></blockquote><p>设计模式的原则是 “找出 程序中变化的地方，并将变化封装起来”，它的关键是意图，而不是结构。</p><h2 id="单例模式"><a class="markdownIt-Anchor" href="#单例模式" data-pjax-state=""></a> 单例模式</h2><div class="table-wrap"><table><thead><tr><th style="text-align:center">说明</th><th style="text-align:center">含义</th></tr></thead><tbody><tr><td style="text-align:center">定义</td><td style="text-align:center">保证一个类仅有一个实例，并提供一个访问它的全局访问点</td></tr><tr><td style="text-align:center">核心</td><td style="text-align:center">确保只有一个实例，并提供全局访问</td></tr><tr><td style="text-align:center">实现</td><td style="text-align:center">假设要设置一个管理员，多次调用也仅设置一次，我们可以使用闭包缓存一个内部变量来实现这个单例</td></tr></tbody></table></div><blockquote><p>通过定义核心，可以联想到 JavaScript 中的全局对象，利用 ES6 的 let 不允许重复声明的特性，刚好符合这两个特点；是的，全局对象是最简单的单例模式</p></blockquote><figure class="highlight"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang"> javascript</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><div class="code-expand-btn"><i class="fas fa-angle-double-down"></i></div><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> CreateSingleton <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> instance <span class="token operator">=</span> <span class="token keyword">null</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
    <span class="token keyword">if</span> <span class="token punctuation">(</span>instance<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> instance
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>instance <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token class-name">CreateSingleton</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> winner <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CreateSingleton</span><span class="token punctuation">(</span><span class="token string">'winner'</span><span class="token punctuation">)</span> <span class="token comment">//winner</span>
winner<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> sunner <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CreateSingleton</span><span class="token punctuation">(</span><span class="token string">'sunner'</span><span class="token punctuation">)</span> <span class="token comment">//winner</span>
sunner<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></figure><blockquote><p>第二次实例化 <code>CreateSingleton</code> 对象时，由于已经存在了该实例，因此直接将实例返回。</p></blockquote><p>还可以通过代理的形式，将创建对象的操作和实例判断的操作进行解耦拆分，实现更小粒度的划分，符合” 单一职责原则 “；</p><figure class="highlight"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang">javascript</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><div class="code-expand-btn"><i class="fas fa-angle-double-down"></i></div><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 只负责判断是否需要创建对象</span>
<span class="token keyword">let</span> ProxyCreateSingleton <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> instance <span class="token operator">=</span> <span class="token keyword">null</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>instance<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> instance
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Singlton</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 创建对象</span>
<span class="token keyword">let</span> <span class="token function-variable function">Singlton</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
<span class="token punctuation">}</span>
<span class="token comment">// 对象方法</span>
<span class="token class-name">Singlton</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></figure><h2 id="工厂模式"><a class="markdownIt-Anchor" href="#工厂模式" data-pjax-state=""></a> 工厂模式</h2><blockquote><p>什么是工厂：<strong>不暴露对象创建的逻辑，而是将逻辑封装在一个函数内，那么这个函数可以成为工厂</strong></p></blockquote><ol><li>简单工厂</li></ol><figure class="highlight"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang"> javascript</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><div class="code-expand-btn"><i class="fas fa-angle-double-down"></i></div><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> <span class="token function-variable function">factory</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">role</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">User</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> obj<span class="token punctuation">.</span>name
    <span class="token keyword">this</span><span class="token punctuation">.</span>role <span class="token operator">=</span> obj<span class="token punctuation">.</span>role
  <span class="token punctuation">}</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>role<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token string">'superman'</span><span class="token operator">:</span>
      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'平台用户'</span><span class="token punctuation">,</span> role<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'主页'</span><span class="token punctuation">,</span> <span class="token string">'登录页'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">break</span>
    <span class="token keyword">case</span> <span class="token string">'man'</span><span class="token operator">:</span>
      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'游客'</span><span class="token punctuation">,</span> role<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'登录页'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">break</span>
    <span class="token keyword">default</span><span class="token operator">:</span>
      <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'参数错误'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> superman <span class="token operator">=</span> <span class="token function">factory</span><span class="token punctuation">(</span><span class="token string">'superman'</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> man <span class="token operator">=</span> <span class="token function">factory</span><span class="token punctuation">(</span><span class="token string">'man'</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></figure><ol start="2"><li>工厂方法</li></ol><figure class="highlight"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang"> javascript</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><div class="code-expand-btn"><i class="fas fa-angle-double-down"></i></div><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> <span class="token function-variable function">factory</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">role</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token keyword">instanceof</span> <span class="token class-name">factory</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">this</span><span class="token punctuation">[</span>role<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> s
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">factory</span><span class="token punctuation">(</span>role<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

factory<span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">admin</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'平台用户'</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>role <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'登录页'</span><span class="token punctuation">,</span> <span class="token string">'主页'</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function-variable function">common</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'游客'</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>role <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'登录页'</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function-variable function">test</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'测试'</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>role <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'登录页'</span><span class="token punctuation">,</span> <span class="token string">'主页'</span><span class="token punctuation">,</span> <span class="token string">'测试页'</span><span class="token punctuation">]</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>test <span class="token operator">=</span> <span class="token string">'我还有一个测试属性哦'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> admin <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">factory</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> common <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">factory</span><span class="token punctuation">(</span><span class="token string">'common'</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> test <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">factory</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></figure><blockquote><p>工厂方法：对于类的扩充优于修改 继承优于扩充</p></blockquote><ol start="3"><li><p>安全模式下</p><figure class="highlight"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang">javascript</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><div class="code-expand-btn"><i class="fas fa-angle-double-down"></i></div><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token function-variable function">Demo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token keyword">instanceof</span> <span class="token class-name">Demo</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token class-name">Demo</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">show</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
d<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token function">Demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
d<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></figure></li><li><p>抽象工厂</p><blockquote><p>抽象工厂的作用是让子类继承父类，但子类必须实现父类没有实现的功能。</p></blockquote></li></ol><figure class="highlight"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang">javascript</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><div class="code-expand-btn"><i class="fas fa-angle-double-down"></i></div><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>
  <span class="token function">getPrice</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'抽象方法不能调用'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token function">getSpeed</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'抽象方法不能调用'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">BMW</span> <span class="token keyword">extends</span> <span class="token class-name">Car</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">price<span class="token punctuation">,</span> speed</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>price <span class="token operator">=</span> price
    <span class="token keyword">this</span><span class="token punctuation">.</span>speed <span class="token operator">=</span> speed
  <span class="token punctuation">}</span>
  <span class="token comment">// 子类必须实现父类没有实现的方法</span>
  <span class="token function">getPrice</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>price
  <span class="token punctuation">}</span>
  <span class="token function">getSpeed</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>speed
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> bmw <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMW</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bmw<span class="token punctuation">.</span><span class="token function">getPrice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></figure><h2 id="外观模式"><a class="markdownIt-Anchor" href="#外观模式" data-pjax-state=""></a> 外观模式</h2><div class="table-wrap"><table><thead><tr><th style="text-align:center">说明</th><th style="text-align:center">含义</th></tr></thead><tbody><tr><td style="text-align:center">定义</td><td style="text-align:center">为子系统中的一组接口提供一个一致的界面，定义一个高层接口，这个接口使子系统更加容易使用</td></tr><tr><td style="text-align:center">核心</td><td style="text-align:center">可以通过请求外观接口来达到访问子系统，也可以选择越过外观来直接访问子系统</td></tr><tr><td style="text-align:center">实现</td><td style="text-align:center">外观模式在 JS 中，可以认为是一组函数的集合</td></tr></tbody></table></div><figure class="highlight"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang">javascript</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><div class="code-expand-btn"><i class="fas fa-angle-double-down"></i></div><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 三个处理函数</span>
<span class="token keyword">function</span> <span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'start'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">doing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'doing'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 外观函数，将一些处理统一起来，方便调用</span>
<span class="token keyword">function</span> <span class="token function">execute</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token function">doing</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 调用init开始执行</span>
<span class="token keyword">function</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 此处直接调用了高层函数，也可以选择越过它直接调用相关的函数</span>
  <span class="token function">execute</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// start doing end</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></figure><h2 id="适配器模式"><a class="markdownIt-Anchor" href="#适配器模式" data-pjax-state=""></a> 适配器模式</h2><div class="table-wrap"><table><thead><tr><th style="text-align:center">说明</th><th style="text-align:center">含义</th></tr></thead><tbody><tr><td style="text-align:center">定义</td><td style="text-align:center">是解决两个软件实体间的接口不兼容的问题，对不兼容的部分进行适配</td></tr><tr><td style="text-align:center">核心</td><td style="text-align:center">解决两个已有接口之间不匹配的问题</td></tr><tr><td style="text-align:center">实现</td><td style="text-align:center">比如一个简单的数据格式转换的适配器</td></tr></tbody></table></div><figure class="highlight"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang">javascript</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><div class="code-expand-btn"><i class="fas fa-angle-double-down"></i></div><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token constant">A</span> <span class="token operator">=</span> <span class="token constant">A</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token constant">A</span><span class="token punctuation">.</span><span class="token function-variable function">g</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token constant">A</span><span class="token punctuation">.</span><span class="token function-variable function">on</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> type<span class="token punctuation">,</span> fn</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> dom <span class="token operator">=</span> <span class="token keyword">typeof</span> id <span class="token operator">===</span> <span class="token string">'string'</span> <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">g</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token operator">:</span> id
  <span class="token keyword">if</span> <span class="token punctuation">(</span>dom<span class="token punctuation">.</span>addEventListener<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    dom<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>dom<span class="token punctuation">.</span>attachEvent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    dom<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">'on'</span> <span class="token operator">+</span> type<span class="token punctuation">,</span> fn<span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    dom<span class="token punctuation">[</span><span class="token string">'on'</span> <span class="token operator">+</span> type<span class="token punctuation">]</span> <span class="token operator">=</span> fn
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token constant">A</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>window<span class="token punctuation">,</span> <span class="token string">'load'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token constant">A</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'mybutton'</span><span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></figure><h2 id="装饰器模式"><a class="markdownIt-Anchor" href="#装饰器模式" data-pjax-state=""></a> 装饰器模式</h2><div class="table-wrap"><table><thead><tr><th style="text-align:center">说明</th><th style="text-align:center">含义</th></tr></thead><tbody><tr><td style="text-align:center">定义</td><td style="text-align:center">以动态地给某个对象添加一些额外的职责，而不会影响从这个类中派生的其他对象。<br>是一种 “即用即付” 的方式，能够在不改变对 象自身的基础上，在程序运行期间给对象动态地添加职责</td></tr><tr><td style="text-align:center">核心</td><td style="text-align:center">是为对象动态加入行为，经过多重包装，可以形成一条装饰链</td></tr><tr><td style="text-align:center">实现</td><td style="text-align:center">获取该元素已绑定的事件，调用后在调用扩充的事件</td></tr></tbody></table></div><figure class="highlight"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang">javascript</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><div class="code-expand-btn"><i class="fas fa-angle-double-down"></i></div><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token function-variable function">decorator</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">input<span class="token punctuation">,</span> fn</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 我想要对 input 的点击事件 进行扩充，首先要获取原有的功能</span>
  <span class="token keyword">var</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> input<span class="token punctuation">.</span>onclick <span class="token operator">===</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> oldClickEvent <span class="token operator">=</span> input<span class="token punctuation">.</span>onclick
    input<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">oldClickEvent</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    input<span class="token punctuation">.</span>onclick <span class="token operator">=</span> fn
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token function">decorator</span><span class="token punctuation">(</span><span class="token string">'tel_input'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  telDemoText<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></figure><h2 id="参考"><a class="markdownIt-Anchor" href="#参考" data-pjax-state=""></a> 参考</h2><ul><li><a target="_blank" rel="noopener" href="https://www.cnblogs.com/imwtr/p/9451129.html">https://www.cnblogs.com/imwtr/p/9451129.html</a></li><li><a target="_blank" rel="noopener" href="https://www.cnblogs.com/xiaogua/p/10502892.html">https://www.cnblogs.com/xiaogua/p/10502892.html</a></li></ul><h2 id="同类推荐"><a class="markdownIt-Anchor" href="#同类推荐" data-pjax-state=""></a> 同类推荐</h2><ul><li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844904032826294286">https://juejin.cn/post/6844904032826294286</a></li></ul></article>

      </div>
      <!-- 标签-->
      <div class="c-padded-lr-responsive">
        <div class="ui basic red label">认知学习</div>
      </div>
      <!--打赏/评分-->
      <div class="ui center aligned basic segment">
        <div class="ui star rating"></div>
      </div>

      <!--扩展-->

    </div>
    <!--message-->
    <div class="ui attached positive message">
      <div class="ui middle aligned grid">
        <div class="eleven wide column">
          <ui class="list">
            <li>作者：QianMo(联系作者)</li>
            <li>发表时间:2021-7-13 09:27</li>
            <li>版权声明:XXXXXXXXXXXXXXXXXXX</li>
            <li>公众号转载:XXXXXXXXXXXXXXXXXX</li>

          </ui>

        </div>
      </div>
    </div>

    <!--comment-->
    <div class="ui bottom attached segment">
      <!--list-->
      <div class="ui blue segment">
        <div class="ui left aligned threaded comments">
          <h3 class="ui dividing header">Comments</h3>
          <div class="comment">
            <a class="avatar">
              <img src="https://cdn.pixabay.com/photo/2021/06/29/23/05/poppy-6375453_960_720.jpg">
            </a>
            <div class="content">
              <a class="author">Matt</a>
              <div class="metadata">
                <span class="date">今天下午 5:42</span>
              </div>
              <div class="text">太赞了！ </div>
              <div class="actions">
                <a class="reply">回复</a>
              </div>
            </div>
          </div>
          <div class="comment">
            <a class="avatar">
              <img src="https://cdn.pixabay.com/photo/2021/06/29/23/05/poppy-6375453_960_720.jpg">
            </a>
            <div class="content">
              <a class="author">Elliot Fu</a>
              <div class="metadata">
                <span class="date">昨天上午12:30</span>
              </div>
              <div class="text">
                <p>這對我的研究是非常有用.謝謝!</p>
              </div>
              <div class="actions">
                <a class="reply">回复</a>
              </div>
            </div>
            <div class="comments">
              <div class="comment">
                <a class="avatar">
                  <img src="https://cdn.pixabay.com/photo/2021/06/29/23/05/poppy-6375453_960_720.jpg">
                </a>
                <div class="content">
                  <a class="author">Jenny Hess</a>
                  <div class="metadata">
                    <span class="date">刚刚</span>
                  </div>
                  <div class="text">艾略特你永远是多么正确 :) </div>
                  <div class="actions">
                    <a class="reply">回复</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="comment">
            <a class="avatar">
              <img src="https://cdn.pixabay.com/photo/2021/06/29/23/05/poppy-6375453_960_720.jpg">
            </a>
            <div class="content">
              <a class="author">Joe Henderson</a>
              <div class="metadata">
                <span class="date">5 天以前</span>
              </div>
              <div class="text">老兄，这太棒了。非常感谢。 </div>
              <div class="actions">
                <a class="reply">回复</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ui form">
        <div class="field">
          <textarea name="content" id="" cols="30" rows="10" placeholder="请输入评论信息...."></textarea>
        </div>
        <div class="fields">
          <div class="field">
            <div class="ui left icon input">
              <i class="user icon"></i>
              <input type="text" name="nickname" placeholder="姓名">
            </div>

          </div>
          <div class="field">
            <div class="ui left icon input">
              <i class="mail icon"></i>
              <input type="text" name="email" placeholder="邮箱">
            </div>
          </div>
          <div class="field">
            <button class="ui blue basic button"><i class="edit icon"></i> 评论</button>
          </div>

        </div>
      </div>
    </div>
  </div>

</div>

<div class="c-padded-tb c-fixed c-right-bottom">
  <div class="ui vertical icon buttons ">
    <button type="button" class="ui toc teal button">目录</button>
    <a href="#comment-container" class="ui teal button">留言</a>
    <a href="#" class="ui icon button"><i class="chevron up icon"></i></a>
  </div>
</div>

<div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;">
  <ol class="js-toc">

  </ol>
</div>

<!-- footer -->
<footer class="ui inverted attached segment">
  <div class="c-footer-text" >
    <h5>此博客网站仅供个人使用</h5>
    <span id="runTime"></span>

  </div>

</footer>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script type="text/javascript" src="../static/js/time.js" th:src="@{js/time.js}"></script>
<script type="text/javascript" src="../static/js/button.js" th:src="@{/js/button.js}"></script>
<script type="text/javascript" src="../static/js/star.js" th:src="@{/js/star.js}"></script>
<script type="text/javascript" src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script type="text/javascript" src="../static/js/tocbot.js" th:src="@{/js/tocbot.js}"></script>
</body>
</html>